<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="{{env('SITE_DESCRIPTION')}}">

    <title>{{env('SITE_TITLE')}}</title>

    <link href="{{asset('/org/site')}}/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="{{asset('/org/site')}}/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>

    <link href="{{asset('/org/site')}}/basic/css/demo.css" rel="stylesheet" type="text/css"/>

    <link href="{{asset('/org/site')}}/css/hmstyle.css" rel="stylesheet" type="text/css"/>
    <link href="{{asset('/org/site')}}/css/skin.css" rel="stylesheet" type="text/css"/>
    <script src="{{asset('/org/site')}}/AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="{{asset('/org/site')}}/AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
    <script src="{{asset('/org/plus/sweetalert2.all.min.js')}}"></script>
    @include('admin.layouts._hdjs')
    @include('admin.layouts._message')
    <style>
        .swiper-container {
            width: 1350px;
            height: 430px;
        }
    </style>
</head>
<body>
{{--顶部导航和搜索框是公用的--}}
@include('site.layouts._top')
<div class="banner">
    <!--轮播 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            @foreach($topCategorys->random(4) as $key => $category)
                <li class="swiper-slide">
                    <a href="{{route('site.lists',$category['id'])}}">
                        <img src="{{asset('/org/site')}}/images/ad{{++$key}}.jpg" title="{{$category['title']}}"/>
                    </a>
                </li>
            @endforeach
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        {{--<div class="swiper-button-prev"></div>--}}
        {{--<div class="swiper-button-next"></div>--}}
    </div>
    <script>
        require(['hdjs'], function (hdjs) {
            hdjs.swiper('.swiper-container', {
                loop: true,
                //自动轮换
                autoplay: {
                    delay: 5000,
                },
                //如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                //如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })
        })
    </script>
    <div class="clear"></div>
</div>
<div class="shopNav">
    <div class="slideall">
        <div class="long-title"><span class="all-goods">全部分类</span></div>
        @auth('web')
        <div class="nav-cont">
            <div class="nav-extra">
                <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>个人中心
                <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
            </div>
        </div>
        @endauth
        <script>
            $(".nav-cont").click(function () {
                //跳转到我的空间
                location.href="{{route('site.center.where','index')}}"
            })
        </script>
        <!--侧边导航 -->
        <div id="nav" class="navfull">
            <div class="area clearfix">
                <div class="category-content" id="guide_2">
                    <div class="category">
                        <ul class="category-list" id="js_climit_li">
                            @foreach($topCategorys as $category)
                                <li class="appliance js_toggle relative first" style="height: 43px">
                                    <div class="category-info">
                                        <h3 class="category-name b-category-name">
                                            <i>
                                                <img src="{{asset("/org/site/images/{$category['icon']}")}}">
                                            </i>
                                            <a class="ml-22"
                                               href="{{route('site.lists',$category['id'])}}"
                                               title="顶部导航一级栏目">
                                                {{$category['title']}}
                                            </a>
                                        </h3>
                                        <em>&gt;</em>
                                    </div>
                                    <div class="menu-item menu-in top">
                                        <div class="area-in">
                                            <div class="area-bg">
                                                <div class="menu-srot">
                                                    <div class="sort-side">
                                                        @foreach($category->getChildCategory() as $twoCategory)
                                                            <dl class="dl-sort">
                                                                <dt>
                                                                    <a href="{{route('site.lists',$twoCategory['id'])}}">
                                                                <span title="顶部导航二级栏目">
                                                                    {{$twoCategory['title']}}
                                                                </span>
                                                                    </a>
                                                                </dt>
                                                                @foreach($twoCategory->getChildCategory() as $threeCategory)
                                                                    <dd>
                                                                        <a title="顶部导航三级栏目"
                                                                           href="{{route('site.lists',$threeCategory['id'])}}">
                                                                            <span>{{$threeCategory['title']}}</span>
                                                                        </a>
                                                                    </dd>
                                                                @endforeach
                                                            </dl>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>

            </div>
        </div>


        <!--轮播-->

        <script type="text/javascript">
            (function () {
                $('.am-slider').flexslider();
            });
            $(document).ready(function () {
                $("li").hover(function () {
                    $(".category-content .category-list li.first .menu-in").css("display", "none");
                    $(".category-content .category-list li.first").removeClass("hover");
                    $(this).addClass("hover");
                    $(this).children("div.menu-in").css("display", "block")
                }, function () {
                    $(this).removeClass("hover")
                    $(this).children("div.menu-in").css("display", "none")
                });
            })
        </script>


        <!--小导航 -->
        <div class="am-g am-g-fixed smallnav">
            <div class="am-u-sm-3">
                <a href="sort.html"><img src="{{asset('/org/site')}}/images/navsmall.jpg"/>
                    <div class="title">商品分类</div>
                </a>
            </div>
            <div class="am-u-sm-3">
                <a href="#"><img src="{{asset('/org/site')}}/images/huismall.jpg"/>
                    <div class="title">大聚惠</div>
                </a>
            </div>
            <div class="am-u-sm-3">
                <a href="#"><img src="{{asset('/org/site')}}/images/mansmall.jpg"/>
                    <div class="title">个人中心</div>
                </a>
            </div>
            <div class="am-u-sm-3">
                <a href="#"><img src="{{asset('/org/site')}}/images/moneysmall.jpg"/>
                    <div class="title">投资理财</div>
                </a>
            </div>
        </div>

        <!--走马灯 -->

    </div>
    <script type="text/javascript">
        if ($(window).width() < 640) {
            function autoScroll(obj) {
                $(obj).find("ul").animate({
                    marginTop: "-39px"
                }, 500, function () {
                    $(this).css({
                        marginTop: "0px"
                    }).find("li:first").appendTo(this);
                })
            }

            $(function () {
                setInterval('autoScroll(".demo")', 3000);
            })
        }
    </script>
</div>
<div class="shopMainbg">
    <div class="shopMain" id="shopmain">

        <!--今日推荐 -->

        <div class="am-g am-g-fixed recommendation">
            <div class="clock am-u-sm-3">
                <img src="{{asset('/org/site')}}/images/tuijian2.jpg " width="120px" height="120px"></img>
                <p>今日<br>推荐</p>
            </div>


            <div class="am-u-sm-4 am-u-lg-3 ">
                <div class="info ">
                    <h3>真的有鱼</h3>
                    <h4>开年福利篇</h4>
                </div>
                <div class="recommendationMain one">
                    <a href="{{route('site.lists',33)}}"><img src="{{asset('/org/site')}}/images/tj.png "></img></a>
                </div>
            </div>
            <div class="am-u-sm-4 am-u-lg-3 ">
                <div class="info ">
                    <h3>囤货过冬</h3>
                    <h4>让爱早回家</h4>
                </div>
                <div class="recommendationMain two">
                    <a href="{{route('site.lists',39)}}">
                        <img src="{{asset('/org/site')}}/images/tj1.png "></img>
                    </a>
                </div>
            </div>
            <div class="am-u-sm-4 am-u-lg-3 ">
                <div class="info ">
                    <h3>浪漫情人节</h3>
                    <h4>甜甜蜜蜜</h4>
                </div>
                <div class="recommendationMain three">
                    <a href="{{route('site.lists',9)}}">
                        <img src="{{asset('/org/site')}}/images/tj2.png "></img>
                    </a>
                </div>
            </div>

        </div>
        <div class="clear "></div>
        <!--热门活动 -->

        <div class="am-container activity ">
            <div class="shopTitle ">
                <h4>热销</h4>
                <h3>优惠多多 快乐多多 </h3>
                <span class="more ">
                    <a href="{{route('site.lists',array_random($topCategorys->pluck('id')->toArray()))}}">
                        更多商品<i class="am-icon-angle-right" style="padding-left:10px ;"></i>
                    </a>
                </span>
            </div>
            <div id="hot" class="am-g am-g-fixed ">
                <div class="am-u-sm-3 " style="cursor: pointer;">
                    <div class="icon-sale one " hidden></div>
                    <h4 hidden>秒杀</h4>
                    <div class="activityMain ">
                        <img src="{{asset('/org/site')}}/images/activity1.jpg "></img>
                    </div>
                    <div class="info ">
                        <h3>人比黄花瘦，犹记红烧肉</h3>
                    </div>
                </div>

                <div class="am-u-sm-3 " style="cursor: pointer;">
                    <div class="icon-sale two " hidden></div>
                    <h4 hidden>特惠</h4>
                    <div class="activityMain ">
                        <img src="{{asset('/org/site')}}/images/activity2.jpg "></img>
                    </div>
                    <div class="info ">

                        <h3>相见时难别亦难，清蒸螃蟹别放盐</h3>
                    </div>
                </div>

                <div class="am-u-sm-3 " style="cursor: pointer;">
                    <div class="icon-sale three " hidden></div>
                    <h4 hidden>团购</h4>
                    <div class="activityMain ">
                        <img src="{{asset('/org/site')}}/images/activity3.jpg "></img>
                    </div>
                    <div class="info ">
                        <h3>曾经沧海难为水，鱼香肉丝配鸡腿</h3>
                    </div>
                </div>

                <div class="am-u-sm-3 last " style="cursor: pointer;">
                    <div class="icon-sale " hidden></div>
                    <h4 hidden>超值</h4>
                    <div class="activityMain ">
                        <img src="{{asset('/org/site')}}/images/activity.jpg "></img>
                    </div>
                    <div class="info ">
                        <h3>床前明月光，鸭血粉丝汤</h3>
                    </div>
                </div>

            </div>
        </div>
        {{--获取一个由所有一级栏目id组成的数组--}}
        {{--有以下两种方法,其实都一样--}}
        {{--dd($topCategorys->pluck('id')->toArray())--}}
        {{--dd(\App\Models\Category::where('parent_id',0)->pluck('id')->toArray())--}}
        <div class="clear "></div>
        <script>
            $(function () {
                $("#hot").find("div.am-u-sm-3").click(function () {
                    location.href = "{{route('site.lists',array_random($topCategorys->pluck('id')->toArray()))}}"
                })
            })
        </script>

        {{--在首页中只需要给我顶级栏目(栏目parent_id == 0)的栏目对象collection(之所以这个collection中我要对象就是为了方便在后期可以调用对象中的方法,今儿获取不同的数据在前台进行展示)--}}
        @foreach($topCategorys as $key => $topCategory)
            @if($key<2)
                <div id="f2">
                    <!--坚果-->
                    <div class="am-container ">
                        <div class="shopTitle ">
                            <h4>{{$topCategory['title']}}</h4>
                            <h3>酥酥脆脆，回味无穷</h3>
                            <div class="today-brands ">
                                {{--获取当前栏目的所有三级栏目并通过foreach循环展示出来--}}
                                @foreach($topCategory->getThreeCategory() as $k =>$v)
                                    <a href="{{route('site.lists',$k)}} ">{{$v}}</a>
                                @endforeach
                            </div>
                            <span class="more ">
                                {{--更多美味是随机返回一个顶级栏目列表--}}
                                <a href="{{route('site.lists',array_random($topCategorys->pluck('id')->toArray()))}}">
                        更多美味<i class="am-icon-angle-right" style="padding-left:10px ;"></i>
                    </a>
                        </span>
                        </div>
                    </div>
                    <div class="am-g am-g-fixed floodThree ">
                        <div class="am-u-sm-4 text-four list">
                            <div class="word">
                                {{--从所有栏目中随机取出6个栏目title为2个汉字的栏目出来--}}
                                @foreach($topCategory->getTwoWordCategory() as $key => $value)
                                    <a class="outer" href="{{route('site.lists',$key)}}">
                                        <span class="inner"><b class="text">{{$value}}</b></span>
                                    </a>
                                @endforeach
                            </div>
                            <img src="{{asset('/org/site')}}/images/act1.png "/>
                            <div class="outer-con ">
                                <div class="title ">
                                    吃,我们是专业的!
                                </div>
                            </div>
                            <div class="triangle-topright"></div>
                        </div>
                        {{--从当前顶级栏目中随机返回6个商品,但是现在顶级栏目中商品有点儿少,暂时先从商品表中随机取6个商品展示--}}
                        {{--@foreach($topCategory->getCategoryGoods()->random(6) as $key => $value)--}}
                        @foreach(\App\Models\Goods::select('id','price','pics','title')->get()->random(6) as $key=>$value)
                            @switch($key)
                                @case(0)
                                <div class="am-u-sm-4 text-four">
                                    @break
                                    @case(1)
                                    <div class="am-u-sm-4 text-four sug">
                                        @break
                                        @case(2)
                                        <div class="am-u-sm-4 text-five big">
                                            @break
                                            @case(3)
                                            <div class="am-u-sm-4 text-four">
                                                @break
                                                @case(4)
                                                <div class="am-u-sm-4  text-five sug">
                                                    @break
                                                    @default
                                                    <div class="am-u-sm-4  text-five big">
                                                        @endswitch
                                                        <a href="{{route('site.detail',$value['id'])}}">
                                                            <img src="{{$value['pics'][0]}}"/>
                                                            <div class="outer-con ">
                                                                <div class="title ">
                                                                    {{$value['title']}}
                                                                </div>
                                                                <div class="sub-title ">
                                                                    ¥{{$value['price']}}
                                                                </div>
                                                                @auth("web")
                                                                    <i goods_id="{{$value['id']}}"
                                                                       title="收藏宝贝"
                                                                       class="am-icon-shopping-basket am-icon-md  seprate"
                                                                    >
                                                                    </i>
                                                                @endauth
                                                            </div>
                                                        </a>
                                                    </div>
                                                    @endforeach
                                                </div>

                                                <div class="clear "></div>
                                            </div>
                                            @endif
                                            @endforeach
                                            {{--公共的底部区域--}}
                                            @include('site.layouts._bottom')
                                        </div>
                                    </div>
                                    <script>
                                        //写一个js用来当来收藏商品
                                        $(".am-icon-md").click(function () {
                                            if (confirm("确定要收藏这个宝贝吗?")) {
                                                //获取当前要收藏的商品id
                                                let id = $(this).attr('goods_id');
                                                // 这里需要发送异步请求
                                                $.get("/collect/" + "Goods/" + id, {flag: "create"},
                                                    function (data) {
                                                        if (data.status) {
                                                            //进入到这个判断体中说明商品收藏成功或者已经收藏过
                                                            require(['hdjs'], function (hdjs) {
                                                                hdjs.swal({
                                                                    text: data.message,
                                                                    button: true,
                                                                    icon: 'success'
                                                                })
                                                            })
                                                        }
                                                    }, 'json')


                                                //阻止之后a标签的默认跳转事件
                                                return false;
                                            }
                                        })
                                    </script>
                                    <!--引导 -->
                                    {{--
                                    <div class="navCir">
                                        <li class="active">
                                            <a href="home.html">
                                                <i class="am-icon-home "></i>首页
                                            </a>
                                        </li>
                                        <li>
                                            <a href="sort.html">
                                                <i class="am-icon-list"></i>分类
                                            </a>
                                        </li>
                                        <li>
                                            <a href="shopcart.html">
                                                <i class="am-icon-shopping-basket"></i>购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{asset('/org/site')}}/person/index.html">
                                                <i class="am-icon-user"></i>我的
                                            </a>
                                        </li>
                                    </div>
                                    --}}


                                <!--公共的侧边菜单 -->
                                    @include('site.layouts._slidebar')
                                    <script>
                                        window.jQuery || document.write('<script src="{{asset('home/basic/js/jquery.min.js')}}"><\/script>');
                                    </script>
                                    <script type="text/javascript "
                                            src="{{asset('/org/site')}}/basic/js/quick_links.js "></script>
</body>

</html>
